import React, { Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Card,
  Form,
  Divider,
  Radio,
  Col,
  Row,
  Tag,
  Input,
  Modal,
  DatePicker,
  message,
  Button,
  Switch,
  Select,
  InputNumber,
} from 'antd';
import StandardTable from '@/components/StandardTable';
import Ellipsis from '@/components/Ellipsis';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import AdjustedValueForm from './component/AdjustedValueForm';
import HandPassForm from './component/HandPassForm';
import HandBatchPassForm from './component/HandBatchPassForm';
import OptLogView from '../component/OptLogView';
import getExtend from '@/utils/getPathExtendInfo';

import styles from '../../styles/Manage.less';
import HandBatchEditForm from './component/HandBatchEditForm';

const FormItem = Form.Item;

const CHECK_RESULT_LIST = [
  '正常',
  '新城不检测',
  '首次活动，跟上3次非活动比存在增长低于1.2倍情况',
  '本次非活动相比上3次非活动增幅下降为0.7以下',
  '本次非活动相比上3次非活动存在增幅超过1.5倍的情况',
  '新品，首次销售非活动',
  '预测值为空值、负值、0',
  '本次活动相比上3次同组活动存在增幅超过1.2倍的情况',
  '首次活动，跟上3次非活动比存在增长低于1.2倍情况',
  '首次活动，跟上3次非活动比存在增长超5倍情况',
  '本次活动比上3次活动存在下降为0.7以下情况',
];

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

// 活动类型：0 无活动，1 常规活动，2 特殊活动
const ACT_TYPE_MAP = {
  0: '无活动',
  1: '常规活动',
  2: '特殊活动',
};
const goodsTypeList = [
  { name: '全部', value: '' },
  { name: '新品', value: '1' },
  { name: '涨价品', value: '2' },
  { name: '降价品', value: '3' },
  { name: '常规活动品', value: '4' },
  { name: '特殊活动品', value: '5' },
];

const goodsTypeMap = goodsTypeList.reduce((a, b) => {
  const val = a;
  val[b.value] = b.name;
  return val;
}, {});

const checkFlagShow = checkFlag => {
  if (checkFlag === 0) {
    return <Tag color="cyan">待检测</Tag>;
  }
  if (checkFlag === 1) {
    return <Tag color="#f50">失败</Tag>;
  }
  if (checkFlag === 2) {
    return <Tag color="#87d068">通过</Tag>;
  }
  if (checkFlag === 3) {
    return <Tag color="#108ee9">手动通过</Tag>;
  }
  return <Tag color="lime">未知状态</Tag>;
};

@Form.create()
@connect(({ forecastResult, loading }) => ({
  forecastResult,
  loading: loading.models.forecastResult,
}))
class DetailManage extends React.Component {
  state = {
    lv1ClassifyType: 1, // 默认全部
    checkStatus: -1,
    cityProductId: 0,
    sku: 0,
    skuName: '',
    goodsType: '',
    progressStatus: -1, // 预测流程状态
    selectedRowKeys: [],
    selectedRows: [],
    forecastDate: moment(new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 2)), // 被预测时间
    forecastDateString: moment(new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 2)).format(
      'YYYY-MM-DD'
    ),
    checkResult: '',
    isSellEdited: false,
    modalVisible: false,
    batchEditModalVisible: false,
    batchEditSkuName: '',
    optLogVisible: false, // 操作日志
    passVisible: false, // 手动执行通过页面
    recordValue: {},
    isOperation: false, // 是否为运营操作页面
    batchPassVisible: false, // 批量处理

    cityList: [],
    warehouseList: [],
    selectCityIdList: [],
    selectWarehouseIdList: [],
  };

  // 表格字段
  columns = [
    {
      title: '日期',
      width: 160,
      fixed: 'left',
      align: 'center',
      render: (text, record) => (
        <span>
          {record.forecastDate}({record.dayOfWeek})
        </span>
      ),
    },
    { title: '城市', width: 90, dataIndex: 'cityName' },
    { title: '仓库', width: 120, dataIndex: 'warehouseName' },
    { title: '1级分类', width: 120, dataIndex: 'lv1ClassifyName' },
    { title: '商品ID', width: 120, dataIndex: 'cityProductId' },
    { title: 'SKU', width: 120, dataIndex: 'sku' },
    { title: 'SKU名称', width: 120, dataIndex: 'skuName' },
    { title: '活动类型', width: 120, dataIndex: 'actType', render: text => ACT_TYPE_MAP[text] },
    {
      title: '商品类型',
      width: 120,
      dataIndex: 'goodsType',
      render: text => goodsTypeMap[text] || '未知',
    },
    { title: '最终预测销量', width: 120, dataIndex: 'forecastSale' },
    { title: '预测销量', width: 120, dataIndex: 'forecastSale1' },
    { title: '大数据调整数量', width: 160, dataIndex: 'forecastSale2' },
    { title: '运营调整数量', width: 160, dataIndex: 'forecastSale3' },
    { title: '单价', width: 160, dataIndex: 'goodsPrice' },
    { title: 'GMV值', width: 120, dataIndex: 'gmv' },
    {
      title: '检测结果',
      width: 120,
      dataIndex: 'checkFlag',
      render: text => checkFlagShow(text),
    },
    {
      title: '检测结果说明',
      width: 120,
      dataIndex: 'checkResult',
      render: text => (
        <div style={{ width: 120 }}>
          <Ellipsis tooltip lines={1}>
            {text}
          </Ellipsis>
        </div>
      ),
    },
    { title: '最后操作人', width: 120, dataIndex: 'modifier' },
    {
      title: '最后修改时间',
      width: 120,
      dataIndex: 'modified',
      render: text => moment.unix(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '操作',
      width: 160,
      align: 'center',
      fixed: 'right',
      dataIndex: 'option',
      render: (text, record) => (
        <Fragment>
          {record.checkFlag === 1 && (
            <div style={{ display: 'inline' }}>
              <a onClick={() => this.handlePassModalVisible(true, record)}>手动通过</a>
              <Divider type="vertical" />
            </div>
          )}
          <a onClick={() => this.handleModalVisible(true, record)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => this.handleOptLogModalVisible(true, record)}>日志</a>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    const {
      match: { path },
    } = this.props;
    const extendInfo = getExtend(path);
    const { operator } = extendInfo;
    this.setState(
      {
        isOperation: operator === 'operation',
      },
      () => {
        this.handleSearch();
      }
    );

    this.listCity();
    this.listWarehouse();
  }

  listCity = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'forecastResult/listCity',
      callback: data => {
        this.setState({ cityList: data });
      },
    });
  };

  listWarehouse = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'forecastResult/listWarehouse',
      callback: data => {
        this.setState({ warehouseList: data });
      },
    });
  };

  // 修改
  handleModalVisible = (flag, record) => {
    const { progressStatus, isOperation } = this.state;
    if (
      ((progressStatus === 1 || progressStatus === 3) && !isOperation) ||
      (progressStatus === 2 && isOperation)
    ) {
      this.setState({
        modalVisible: !!flag,
        recordValue: record || {},
      });
    } else {
      message.warn('当前状态不允许修改');
    }
  };

  // 批量处理
  handleBatchPassModalVisible = flag => {
    this.setState({
      batchPassVisible: !!flag,
    });
  };

  // 批量处理
  handleBatchEditModalVisible = flag => {
    let sku = '';
    if (flag) {
      const { selectedRows } = this.state;
      const skuIdSet = new Set();
      selectedRows.forEach(row => skuIdSet.add(row.sku));

      if (skuIdSet.size > 1) {
        message.error('已选择的记录中存在不同的sku,请修改');
        return;
      }
      sku = selectedRows[0].skuName;
    }
    this.setState({
      batchEditModalVisible: !!flag,
      batchEditSkuName: sku,
    });
  };

  // 手动通过测试
  handlePassModalVisible = (flag, record) => {
    this.setState({
      passVisible: !!flag,
      recordValue: record || {},
    });
  };

  // 操作日志
  handleOptLogModalVisible = (flag, record) => {
    this.setState({
      optLogVisible: !!flag,
      recordValue: record || {},
    });
  };

  getQueryParams = () => {
    const {
      lv1ClassifyType,
      forecastDateString,
      checkStatus,
      goodsType,
      isOperation,
      cityProductId,
      sku,
      skuName,
      isSellEdited,
      selectWarehouseIdList,
      selectCityIdList,
      checkResult,
    } = this.state;
    const params = {};
    if (lv1ClassifyType !== 0) {
      params.lv1ClassifyType = lv1ClassifyType;
    }
    if (checkStatus >= 0) {
      params.checkFlag = checkStatus;
    }
    params.goodsType = goodsType;

    if (forecastDateString) {
      params.forecastDate = forecastDateString;
    }
    params.isOperation = isOperation;
    if (sku && sku > 0) {
      params.sku = sku;
    }
    if (skuName) {
      params.skuName = skuName.replace(/'/g, '');
    }
    if (checkResult && checkResult !== 'ALL') {
      params.checkResult = checkResult;
    }
    if (cityProductId && cityProductId > 0) {
      params.cityProductId = cityProductId;
    }
    params.isSellEdited = isSellEdited;
    params.cityIdList = selectCityIdList;
    params.warehouseIdList = selectWarehouseIdList;
    return params;
  };

  // 查询操作
  handleSearch = () => {
    const { dispatch } = this.props;
    const params = this.getQueryParams();
    dispatch({
      type: 'forecastResult/fetch',
      payload: {
        params,
      },
      callback: () => {
        this.setState({
          selectedRowKeys: [],
          selectedRows: [],
        });
        this.getForecastProgress();
      },
    });
  };

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  };

  getForecastProgress = () => {
    const { dispatch } = this.props;
    const { forecastDateString, lv1ClassifyType } = this.state;
    dispatch({
      type: 'forecastResult/fetchForecastProgress',
      payload: {
        forecastDate: forecastDateString,
        lv1ClassifyType,
      },
      callback: data => {
        this.setState({
          progressStatus: data,
        });
      },
    });
  };

  onDateChange = (date, dateString) => {
    this.setState(
      {
        forecastDate: date,
        forecastDateString: dateString,
      },
      () => {
        this.getForecastProgress();
        this.handleSearch();
      }
    );
  };

  cityProductIdChange = e => {
    this.setState(
      {
        cityProductId: e.target.value,
      },
      () => {
        this.handleSearch();
      }
    );
  };

  skuChange = e => {
    this.setState(
      {
        sku: e,
      },
      () => {
        this.handleSearch();
      }
    );
  };

  skuNameChange = e => {
    this.setState(
      {
        skuName: e.target.value,
      },
      () => {
        this.handleSearch();
      }
    );
  };

  handleEditGmv = fields => {
    const { dispatch } = this.props;
    const { isOperation } = this.state;
    dispatch({
      type: 'forecastResult/update',
      payload: {
        ...fields,
        isOperation,
      },
      callback: () => {
        message.success('修改成功');
        this.handleModalVisible();
        // 重载数据
        this.handleSearch();
      },
    });
  };

  handleBatchPass = fields => {
    const { dispatch } = this.props;
    const { isOperation, forecastDateString, lv1ClassifyType } = this.state;
    dispatch({
      type: 'forecastResult/handBatchPassCheck',
      payload: {
        ...fields,
        isOperation,
        forecastDate: forecastDateString,
        lv1ClassifyType,
      },
      callback: () => {
        message.success('批量通过');
        this.handleBatchPassModalVisible();
        // 重载数据
        this.handleSearch();
      },
    });
  };

  handleBatchEdit = fields => {
    const { dispatch } = this.props;
    const { isOperation, forecastDateString, lv1ClassifyType } = this.state;
    dispatch({
      type: 'forecastResult/handBatchEdit',
      payload: {
        ...fields,
        isOperation,
        forecastDate: forecastDateString,
        lv1ClassifyType,
      },
      callback: () => {
        message.success('批量修改成功');
        this.handleBatchEditModalVisible(false);
        // 重载数据
        this.handleSearch();
      },
    });
  };

  // 手动通过
  handlePassCheck = fields => {
    const { dispatch } = this.props;
    const { isOperation } = this.state;
    dispatch({
      type: 'forecastResult/handPassCheck',
      payload: {
        ...fields,
        isOperation,
      },
      callback: () => {
        message.success('手动通过');
        this.handlePassModalVisible();
        // 重载数据
        this.handleSearch();
      },
    });
  };

  // 根据GMV调整
  adjustedByGmv = () => {
    const { dispatch } = this.props;
    const { forecastDateString, isOperation, lv1ClassifyType } = this.state;
    Modal.confirm({
      title: '询问',
      content: '确定根据GMV调整数据？',
      okText: '确定',
      cancelText: '再想想',
      onOk: () => {
        dispatch({
          type: 'forecastResult/adjustByGmv',
          payload: {
            forecastDate: forecastDateString,
            lv1ClassifyType,
            isOperation,
          },
          callback: () => this.handleSearch(),
        });
      },
    });
  };

  // 检测预测值
  checkForecast = () => {
    const { dispatch } = this.props;
    const { forecastDateString, isOperation, lv1ClassifyType } = this.state;
    Modal.confirm({
      title: '询问',
      content: '确定开始检测数据？',
      okText: '确定',
      cancelText: '再想想',
      onOk: () => {
        dispatch({
          type: 'forecastResult/verifyResult',
          payload: {
            forecastDate: forecastDateString,
            lv1ClassifyType,
            isOperation,
          },
          callback: () => this.handleSearch(),
        });
      },
    });
  };

  // 发送预测信息
  sendForecastSign = () => {
    const { dispatch } = this.props;
    const { forecastDateString, isOperation, lv1ClassifyType } = this.state;
    Modal.confirm({
      title: '询问',
      content: '数据确认完成，发送给MGR？',
      okText: '确定',
      cancelText: '再想想',
      onOk: () => {
        dispatch({
          type: 'forecastResult/sendForecastSign',
          payload: {
            forecastDate: forecastDateString,
            isOperation,
            lv1ClassifyType,
          },
          callback: () => this.handleSearch(),
        });
      },
    });
  };

  // 运营数据确认
  operationConfirm = () => {
    const { dispatch } = this.props;
    const { forecastDateString, isOperation, lv1ClassifyType } = this.state;
    Modal.confirm({
      title: '询问',
      content: '数据修改完成，确定发送给大数据确认？',
      okText: '确定',
      cancelText: '再想想',
      onOk: () => {
        dispatch({
          type: 'forecastResult/updateToVerification',
          payload: {
            forecastDate: forecastDateString,
            isOperation,
            lv1ClassifyType,
          },
          callback: () => this.handleSearch(),
        });
      },
    });
  };

  // 流转至运营
  turnover2Operation = () => {
    const { dispatch } = this.props;
    const { forecastDateString, isOperation, lv1ClassifyType } = this.state;
    Modal.confirm({
      title: '询问',
      content: '数据修改完成,确定流转至运营?',
      okText: '确定',
      cancelText: '再想想',
      onOk: () => {
        dispatch({
          type: 'forecastResult/turnoverToSale',
          payload: {
            forecastDate: forecastDateString,
            lv1ClassifyType,
            isOperation,
          },
          callback: () => this.handleSearch(),
        });
      },
    });
  };

  // 分页、过滤、排序处理
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const queryParams = this.getQueryParams();
    const params = {
      ...formValues,
      ...filters,
      ...queryParams,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    dispatch({
      type: 'forecastResult/fetch',
      payload: {
        params,
        currentPage: pagination.current,
        pageSize: pagination.pageSize,
      },
    });
  };

  formatValue = (value, defaultValue = '-') => {
    if (value === null || value === undefined) {
      return defaultValue;
    }
    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  };

  renderTableTitle = () => {
    const {
      forecastResult: {
        data: { gmv },
      },
    } = this.props;
    return (
      <span style={{ color: 'red', fontWeight: 'bold' }}>
        合计： GMV:<span>{this.formatValue(gmv, '-')}</span>
      </span>
    );
  };

  render() {
    const {
      loading,
      form: { getFieldDecorator },
      forecastResult: {
        data: { data },
      },
    } = this.props;
    const {
      lv1ClassifyType,
      goodsType,
      forecastDate,
      checkStatus,
      modalVisible,
      optLogVisible,
      passVisible,
      batchPassVisible,
      recordValue,
      isOperation,
      selectedRowKeys,
      progressStatus,
      isSellEdited,
      batchEditModalVisible,
      batchEditSkuName,
      cityList,
      warehouseList,
      selectCityIdList,
      selectWarehouseIdList,
      checkResult,
    } = this.state;
    let totalWidth = 0;
    this.columns.forEach(col => {
      const { width } = col;
      if (width) {
        totalWidth += width;
      }
    });

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
      <PageHeaderWrapper
        title="预测值调整"
        content="注意：T天的预测数据，请在T-2天17:30分之前完成修改，超过时间将无法在此页面修改！"
      >
        <Card bordered={false}>
          <div className={styles.Manage}>
            <div className={styles.ManageForm}>
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }} size="small">
                  <Col md={6} sm={24} size="small">
                    <FormItem key="forecastDate" label="被预测日期">
                      {getFieldDecorator('forecastDate', {
                        initialValue: forecastDate,
                      })(<DatePicker onChange={this.onDateChange} placeholder="选择日期" />)}
                    </FormItem>
                  </Col>
                  <Col md={6} sm={24} size="small">
                    <FormItem key="lv1ClassifyType" label="一级类目">
                      {getFieldDecorator('lv1ClassifyType', {
                        initialValue: lv1ClassifyType,
                      })(
                        <Radio.Group
                          onChange={e => {
                            this.setState(
                              {
                                lv1ClassifyType: e.target.value,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          <Radio.Button value={1}>水果</Radio.Button>
                          <Radio.Button value={2}>蔬菜</Radio.Button>
                        </Radio.Group>
                      )}
                    </FormItem>
                  </Col>

                  <Col md={6} sm={24} size="small">
                    <FormItem key="cityId" label="城市">
                      {getFieldDecorator('cityIdList', {
                        initialValue: selectCityIdList,
                      })(
                        <Select
                          placeholder="选择城市(支持多选)"
                          allowClear
                          mode="multiple"
                          onChange={e => {
                            this.setState(
                              {
                                selectCityIdList: e,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          {cityList.map(item => (
                            <Select.Option value={item.id} key={item.id}>
                              {item.name}
                            </Select.Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>

                  <Col md={6} sm={24} size="small">
                    <FormItem key="warehouseId" label="仓库">
                      {getFieldDecorator('selectWarehouseIdList', {
                        initialValue: selectWarehouseIdList,
                      })(
                        <Select
                          placeholder="选择仓库(支持多选)"
                          allowClear
                          mode="multiple"
                          onChange={e => {
                            this.setState(
                              {
                                selectWarehouseIdList: e,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          {warehouseList.map(item => (
                            <Select.Option value={item.id} key={item.id}>
                              {item.name}
                            </Select.Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem key="skuName" label="SKU名称">
                      {getFieldDecorator('skuName', {})(
                        <Input onChange={this.skuNameChange} placeholder="请输入" />
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem key="sku" label="SKU">
                      {getFieldDecorator('sku', {})(
                        <InputNumber
                          onChange={this.skuChange}
                          placeholder="请输入"
                          precision={0}
                          style={{ width: '100%' }}
                        />
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem key="cityProudctId" label="cityProudctId">
                      {getFieldDecorator('cityProudctId', {})(
                        <Input onChange={this.cityProductIdChange} placeholder="请输入" />
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem key="goodsType" label="商品类型">
                      {getFieldDecorator('goodsType', {
                        initialValue: goodsType,
                      })(
                        <Select
                          onChange={e => {
                            this.setState(
                              {
                                goodsType: e,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          {goodsTypeList.map(item => (
                            <Select.Option value={item.value}>{item.name}</Select.Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem key="checkStatus" label="检测结果">
                      {getFieldDecorator('checkStatus', {
                        initialValue: checkStatus,
                      })(
                        <Select
                          onChange={e => {
                            this.setState(
                              {
                                checkStatus: e,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          <Select.Option value={-1}>全部</Select.Option>
                          <Select.Option value={0}>待检测</Select.Option>
                          <Select.Option value={1}>异常</Select.Option>
                          <Select.Option value={2}>通过</Select.Option>
                          <Select.Option value={3}>手动通过</Select.Option>
                        </Select>
                      )}
                    </FormItem>
                  </Col>

                  <Col md={8} sm={24}>
                    {!isOperation && (
                      <FormItem key="isSellEdited" label="只看运营修改">
                        {getFieldDecorator('isSellEdited', {
                          initialValue: isSellEdited,
                          valuePropName: 'checked',
                        })(
                          <Switch
                            checkedChildren="是"
                            unCheckedChildren="否"
                            onChange={e => {
                              this.setState(
                                {
                                  isSellEdited: e,
                                },
                                () => {
                                  this.handleSearch();
                                }
                              );
                            }}
                          />
                        )}
                      </FormItem>
                    )}
                  </Col>

                  <Col md={24} sm={24}>
                    <FormItem key="checkResult" label="检测结果说明">
                      {getFieldDecorator('checkResult', {
                        initialValue: checkResult,
                      })(
                        <Select
                          onChange={e => {
                            this.setState(
                              {
                                checkResult: e,
                              },
                              () => {
                                this.handleSearch();
                              }
                            );
                          }}
                        >
                          <Select.Option value="ALL" key="ALL">
                            全部
                          </Select.Option>
                          {CHECK_RESULT_LIST.map(item => (
                            <Select.Option value={item} key={item}>
                              {item}
                            </Select.Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }} size="small">
                  <span style={{ marginLeft: 8 }}>
                    {hasSelected &&
                      (progressStatus === 1 || progressStatus === 2 || progressStatus === 3) && (
                        <span>
                          <Button
                            type="primary"
                            onClick={() => {
                              this.handleBatchEditModalVisible(true);
                            }}
                            style={{ margin: '0px 10px' }}
                          >
                            批量修改
                          </Button>
                          <Button
                            type="danger"
                            onClick={() => {
                              this.handleBatchPassModalVisible(true);
                            }}
                            style={{ margin: '0px 10px' }}
                          >
                            批量通过
                          </Button>
                        </span>
                      )}
                    {hasSelected ? `已选择 ${selectedRowKeys.length} 条` : ''}
                  </span>
                  <div style={{ float: 'right', margin: '0px 20px' }}>
                    {!isOperation && progressStatus === 1 && (
                      <Button type="dashed" onClick={this.adjustedByGmv}>
                        按GMV调整
                      </Button>
                    )}
                    {(progressStatus === 1 || progressStatus === 3) && !isOperation && (
                      <Button
                        style={{ margin: '0px 10px' }}
                        type="primary"
                        onClick={this.checkForecast}
                      >
                        检测
                      </Button>
                    )}
                    {progressStatus === 2 && isOperation && (
                      <Button
                        style={{ margin: '0px 10px' }}
                        type="primary"
                        onClick={this.checkForecast}
                      >
                        检测
                      </Button>
                    )}
                    {!isOperation && progressStatus === 1 && (
                      <Button type="danger" onClick={this.turnover2Operation}>
                        流转至运营
                      </Button>
                    )}
                    {isOperation && progressStatus === 2 && (
                      <Button type="danger" onClick={this.operationConfirm}>
                        库存数据确认
                      </Button>
                    )}
                    {!isOperation && progressStatus === 3 && (
                      <Button type="danger" onClick={this.sendForecastSign}>
                        发送预测信号
                      </Button>
                    )}
                  </div>
                </Row>
              </Form>
            </div>
            <Divider type="horizontal" />
            <StandardTable
              loading={loading}
              data={data}
              rowSelection={rowSelection}
              scroll={{ x: totalWidth }}
              columns={this.columns}
              rowKey={record => record.id}
              title={this.renderTableTitle}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        {modalVisible && (
          <AdjustedValueForm
            values={recordValue}
            modalVisible={modalVisible}
            handleOpt={this.handleEditGmv}
            handleModalVisible={this.handleModalVisible}
          />
        )}
        {optLogVisible && (
          <OptLogView
            values={recordValue}
            modalVisible={optLogVisible}
            viewType="result"
            handleModalVisible={this.handleOptLogModalVisible}
          />
        )}
        {passVisible && (
          <HandPassForm
            values={recordValue}
            modalVisible={passVisible}
            handleOpt={this.handlePassCheck}
            handleModalVisible={this.handlePassModalVisible}
          />
        )}
        {batchPassVisible && (
          <HandBatchPassForm
            recordIds={selectedRowKeys}
            modalVisible={batchPassVisible}
            handleOpt={this.handleBatchPass}
            handleModalVisible={this.handleBatchPassModalVisible}
          />
        )}
        {batchEditModalVisible && (
          <HandBatchEditForm
            recordIds={selectedRowKeys}
            modalVisible={batchEditModalVisible}
            skuName={batchEditSkuName}
            handleOpt={this.handleBatchEdit}
            handleModalVisible={this.handleBatchEditModalVisible}
          />
        )}
      </PageHeaderWrapper>
    );
  }
}

export default DetailManage;
